<template>
	<div class="list-page" style="padding:10px">
	 	<!-- 操作组 -->
		<div class="header-bar">
		  <ButtonGroup class="float-left">
		 	<Button #if(option.isGenPriv())priv="#(table.Priv).add"#end icon="h-icon-plus" color="primary" @click="add">添加</Button>
			<Button #if(option.isGenPriv())priv="#(table.Priv).edit"#end :disabled="selects.length!=1" icon="h-icon-edit" color="yellow" @click="editFirst">修改</Button>
			<Poptip #if(option.isGenPriv())priv="#(table.Priv).delete"#end :isdisabled="selects.length==0" class="h-btn h-btn-red" content="确定删除所选记录？" @confirm="del">
				<Button icon="h-icon-trash" color="red">删除</Button>
			</Poptip>
		  </ButtonGroup>
		  <!-- 工具条 -->
		   <ButtonGroup>
		  	<Button icon="h-icon-search"  @click="showSearch=!showSearch" >查询</Button>
		  	#if(option.isGenExport())<Button icon="h-icon-outbox" @click="exports" >导出</Button>#end
		  	<Button icon="h-icon-refresh" @click="reload" >刷新</Button>
		  </ButtonGroup>
		</div>
		<div v-show="showSearch" class="query-bar">
			<Form :model="table.params" class="title-suffix" ref="searchFrom" mode="adapt">
				 #for(column:table.columns)#if(column.isSearchCondition())
			<FormItem label="#(column.Name)" prop="#(column.field)">
		        #switch(column.ControlType)
		            #case('Select')
		            <Select v-model="table.params.#(column.field)" #(column.viewOpt) filterable></Select>
		            #case('Checkbox')
		            <Checkbox v-model="table.params.#(column.field)" #(column.viewOpt) ></Checkbox>
		            #case('Radio')
		            <Radio v-model="table.params.#(column.field)" #(column.viewOpt)></Radio>
		            #case('TextArea')
		            <textarea v-model="table.params.#(column.field)" rows="3" v-autosize v-wordcount="$(column.length)"></textarea>
		            #case('Date')
		            <DatePicker v-model="table.params.#(column.field)"></DatePicker>
		            #case('Time')
		            <DatePicker v-model="table.params.#(column.field)" type="time" hasSeconds></DatePicker>
		            #case('DateTime')
		            <DatePicker v-model="table.params.#(column.field)" type="datetime" hasSeconds></DatePicker>
		            #default
		            #if(column.DataType==12)
		             <DatePicker v-model="table.params.#(column.field)" type="datetime" hasSeconds></DatePicker>
		            #else
		             <input type="text" v-model="table.params.#(column.field)"/>
		            #end
		        #end
       			 </FormItem>
    			#end#end
				<div class="flex-right">
					<Button class="h-btn" icon="icon-reload" @click="resetSerarch">重置</Button>
			        <Button class="h-btn h-btn-primary" icon="h-icon-search" @click="search">确定</Button>
		        </div>
			</Form>
		</div>
		<div class="list">
			<Table :datas="table.data" :loading="table.loading" @trdblclick="edit" @select="selected" checkbox >
				 <TableItem title="序号" prop="$serial" :width="50"></TableItem>
			      #for(column:table.columns)#if(column.isVisibleInList())
			        <TableItem title="#(column.Name)" prop="#(column.field)" #if(column.DataType==12):format="format('yyyy-MM-dd hh:mm')"#end></TableItem>
			      #end#end
			</Table>
		</div>
		<div class="bar">
			<Pagination v-model="table.pagination" align="right" @change="reload"></Pagination>
		</div>
		 <#(table.name)Dialog ref="dlg" @change="reload">
		 </#(table.name)Dialog>
	</div>
</template>
<script>
	import {DataSource,ajax,util} from 'framework'
	import #(table.name)Dialog from  './#(firstToLowerCase(table.name))Dialog.vue'
	let table=new DataSource('#(firstToLowerCase(table.name))/list',true)

	export default {
		name:"#(table.name)",
		components:{#(table.name)Dialog},
		data(){
			return {
				showSearch:false,
				table:table,
				selects:[]
			}
		},mounted(){
			table.load()
		},
		methods:{
			reload(){
				this.selects=[]
				table.load()
			},
			search(){
				this.selects=[]
				table.pagination.page=1;
				table.load()
			},
			rowSelect(v){
				this.selectRow=util.fields(v,'#(table.pks)')
			},
			selected(v){
				this.selects=v.map(it=>util.fields(it,'#(table.pks)'))
			},
			resetSerarch(){
				table.params={}
				this.reload()
			},
			add(){
				this.$refs.dlg.show()
			},
			editFirst(){
				if(this.selects.length==0){
					return;
				}
				this.edit(this.selects[0])
			},
			edit(v){
				#if(option.isGenPriv())
				if(!this.$priv('#(table.Priv).edit')){
					return;
				}
				#end
				this.$refs.dlg.show(util.fields(v,'#(table.pks)'))
			},
			del(){
			    #if(option.isGenPriv())
                if(!this.$priv('#(table.Priv).delete')){
                    return;
                }
                #end
				ajax.post('#(firstToLowerCase(table.name))/delete',this.selects).then(r=>{
					this.reload()
				})
			},
			#if(option.isGenExport())
			exports(){
				//导出全部满足条件的数据
				ajax.download('#(firstToLowerCase(table.name))/export',table.params)
			}
			#end
		}
	}
</script>
